<template>
  <div class="home">
    <grid-layout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
      @layout-updated="layoutUpdatedHandler"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        class="item-container"
        @resize="resizeHandler"
        @move="moveHandler"
        @resized="resizedHandler"
        @moved="movedHandler"
      >
        <chart-single-dimension
          :dataSource="dataArr[item.i].dataSource"
          :title="dataArr[item.i].title"
          :type="dataArr[item.i].type"
          :typeOptions="dataArr[item.i].typeOptions"
          colorTheme="shine"
        ></chart-single-dimension>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
// @ is an alias to /src
import { GridLayout, GridItem } from "vue-grid-layout";
import ChartSingleDimension from "../components/charts/ChartSingleDimension.vue";

export default {
  name: "Home",
  components: {
    GridLayout,
    GridItem,
    ChartSingleDimension,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 3, h: 5, i: "0" },
        { x: 3, y: 0, w: 3, h: 5, i: "1" },
        { x: 6, y: 0, w: 3, h: 5, i: "2" },
        { x: 9, y: 0, w: 3, h: 5, i: "3" },
        { x: 0, y: 3, w: 3, h: 5, i: "4" },
        { x: 3, y: 3, w: 3, h: 5, i: "5" },
        { x: 6, y: 3, w: 3, h: 5, i: "6" },
        { x: 9, y: 3, w: 3, h: 5, i: "7" },
      ],
      dataArr: [
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "line",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "bar",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "bar",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "bar",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "bar",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "line",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "bar",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
        {
          dataSource: [
            { name: "Matcha Latte", value: 43.3 },
            { name: "Milk Tea", value: 85.8 },
            { name: "Cheese Cocoa", value: 83.1 },
            { name: "Walnut Brownie", value: 39.1 },
          ],
          type: "line",
          typeOptions: "line,bar,pie",
          title: "title chart",
        },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      console.log("");
    }, 9000);
  },
  methods: {
    log(arg1 = "log", ...logs) {
      if (logs.length === 0) {
        console.log(arg1);
      } else {
        console.group(arg1);
        logs.forEach((e) => {
          console.log(e);
        });
        console.groupEnd();
      }
    },
    // 显示提示
    showInfo() {
      this.$notify({
        title: "提示",
        message:
          "你可以按住卡片拖拽改变位置；或者在每个卡片的右下角拖动，调整卡片大小",
      });
    },
    // 测试代码
    layoutUpdatedHandler(newLayout) {
      console.group("layoutUpdatedHandler");
      newLayout.forEach((e) => {
        console.log(
          `{'x': ${e.x}, 'y': ${e.y}, 'w': ${e.w}, 'h': ${e.h}, 'i': '${e.i}'},`
        );
      });
      console.groupEnd();
    },
    resizeHandler(i, newH, newW) {
      this.log("resizeHandler", `i: ${i}, newH: ${newH}, newW: ${newW}`);
    },
    moveHandler(i, newX, newY) {
      this.log("moveHandler", `i: ${i}, newX: ${newX}, newY: ${newY}`);
    },
    resizedHandler(i, newH, newW, newHPx, newWPx) {
      this.log(
        "resizedHandler",
        `i: ${i}, newH: ${newH}, newW: ${newW}, newHPx: ${newHPx}, newWPx: ${newWPx}`
      );
    },
    movedHandler(i, newX, newY) {
      this.log("movedHandler", `i: ${i}, newX: ${newX}, newY: ${newY}`);
    },
  },
};
</script>
<style lang="less" scoped>
.item-container {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.item-tag {
  position: absolute;
  top: 2px;
  left: 2px;
}
.chart-card {
  width: 100%;
  height: 100%;
  box-shadow: 5px 5px 5px #ccc;
}
</style>
